<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <script type="text/x-template" id="myComponent">
    <span>
        <div>
            总共{{total}}事项,{{done}}个已完成，{{total-done}}个未完成
        </div>


    </span>
</script>
    <script>
        window.onload = function () {
            Vue.component('todo-word', {
                props: ['total','done'],
                template: '#myComponent'
            })
            var app3 = new Vue({
                el: '#app',
            methods: {
                    addthing: function () {
                        this.todos.push({name: this.thing, done: false});
                    }
                    ,switchdel:function(idx){
                        this.todos[idx].done=!this.todos[idx].done;

                    }
                    ,show:function(ev){
                        if(ev.keyCode==13){
                            var x={name:this.thing,done:false};
                            this.todos.push(x);
                        }

                    }
                },

                data: {
                    thing: 'null',
                    todos: [
                        {name: '罗军', done: false},
                        {name: '吕领领', done: false},
                        {name: 'll', done: true},


                    ]
                }
                ,computed:{
                    done:function(){
                        var count=0;
                        for(var i=0;i<this.todos.length;i++){
                            if(this.todos[i].done){
                                count++;
                            }
                        }
                        return count;
                    }
                }
            });
        }
    </script>
    <style>.del{text-decoration: line-through}</style>
</head>
<body>
<div id="app">
    <input type="text" v-model="thing" @keydown="show($event)"><br/>

    <button v-on:click="addthing">添加</button>

    <div v-for="(todo,idx) in todos">
        <input type="checkbox" v-bind:checked="todo.done" v-on:click="switchdel(idx)">{{idx}}
          <span v-bind:class="{del: todo.done}">
              {{todo.name}}
          </span>
    </div>
    <todo-word :total="todos.length" :done="done"></todo-word>
</div>
</body>
</html>